<template>
  <div class="pick">
    <a-range-picker class="picker"
                    :ranges="{ '昨天': [moment().startOf('day').subtract(1, 'days'),moment().endOf('day').subtract(1, 'days')],'今天': [moment().startOf('day'), moment().endOf('day')],'近3天': [moment().startOf('day').subtract(2, 'days'),moment().endOf('day')],'近7天': [moment().startOf('day').subtract(6, 'days'),moment().endOf('day')],'近30天': [moment().startOf('day').subtract(29, 'days'),moment().endOf('day')],'本周': [moment().startOf('weeks'), moment().endOf('weeks')] ,'本月': [moment().startOf('month'), moment().endOf('month')]}"
                    format="YYYY-MM-DD"
                    show-time
                    :value="data"
                    :get-calendar-container="getCalendarContainer()"
                    @change="onChange"
    >
      <a-icon slot="suffixIcon" type="calendar" :style="{color:'#CFCFCF'}" />
    </a-range-picker>
    <a-checkbox v-model="radioBtn" :class="{ myCheckBox: true, myActive: radioBtn}" @change="onChange1">空值</a-checkbox> 
  </div>
        

</template>

<script>
import moment from 'moment'
import 'moment/locale/zh-cn'
import { mapMutations } from 'vuex'
export default {
  name: 'PickerDate',
  props: {
    clear: {
      type: Boolean,
      default: false
    },
    itemData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      // isAllRead: false
      data: [],
      // radioBtn: '',
      radioBtn: false
    }
  },
  watch: {
    clear (val) {
      if (val) {
        this.data = []
        // this.radioBtn = ''
        this.radioBtn = false
      }
    }
  },
  created () {
    if (this.itemData.defaultValue) {
      const startTime = moment().subtract(29, 'days')
      const endTime = moment()
      const value = `${startTime.format('YYYY-MM-DD HH:mm:ss')}@${endTime.format('YYYY-MM-DD HH:mm:ss')}`

      this.data = [startTime, endTime]
      this.setSearchData({
        'key': `${this.itemData.table}.${this.itemData.code}`,
        'type': this.itemData.type,
        value
      })
    }
  },
  methods: {
    ...mapMutations('customer', ['setSearchData']),
    moment,
    onChange (dates, dateStrings) {
      this.data = dates
      let value = ''

      if (Array.isArray(dateStrings) && dateStrings[0]) {
        // this.radioBtn = ''
        this.radioBtn = false
        value = `${dateStrings[0]}@${dateStrings[1]}`
      } else {
        value = ''
      }
      this.setSearchData({
        'key': `${this.itemData.table}.${this.itemData.code}`,
        'type': this.itemData.type,
        value
      })
    },
    onChange1 (val) {
      // if (this.radioBtn === 'a') {
      //     this.data = []
      //     this.setSearchData({
      //         'key': `${this.itemData.table}.${this.itemData.code}`,
      //         'type': this.itemData.type,
      //         'value': 'null'
      //     })
      // }
      if (this.radioBtn) {
        this.data = []
        this.setSearchData({
          'key': `${this.itemData.table}.${this.itemData.code}`,
          'type': this.itemData.type,
          'value': 'null'
        })
      } else {
        this.setSearchData({
          'key': `${this.itemData.table}.${this.itemData.code}`,
          'type': this.itemData.type,
          'value': ''
        })
      }
    },
    handleSelectChange (val) {
      this.$emit('change', val)
    },
    getCalendarContainer () {
      return triggerNode => triggerNode.parentNode
    }
  }
}
</script>

<style lang="scss">
.pick {
    height: 39px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   ::v-deep.myCheckBox {
            box-sizing: border-box;
            color: rgba(0, 0, 0, 0.65);
            font-size: 12px;
            list-style: none;
            display: inline-block;
            height: 32px;
            margin: 0;
            padding: 0 2px;
            line-height: 30px;
            background: #fff;
            border: 1px solid #d9d9d9;
            cursor: pointer;
            border-radius: 2px;
            min-width: 32px;
            text-align: center;
            span {
                padding: 0!important;
            }
            &.myActive {
                border-color: #1890ff;
                box-shadow: none !important;
                span {
                    color: #1890ff;
                }
            }
       .ant-checkbox {
           display: none;
       }
   }
}

</style>
